<template>
	<view class="wrapper">
		<u-form :model="form" ref="uForm">
			<u-form-item label="机台号" :label-width="labelWidth">
				<u-input v-model="form.machineId" placeholder="请输入问题机台号码"/>
			</u-form-item>
			<u-form-item label="异常类型" :label-width="labelWidth">
				<u-radio-group v-model="form.abnormalType">
					<u-radio 
						@change="radioChange" 
						v-for="(item, index) in list" :key="index" 
						:name="item.name"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<u-button type="warning" size="medium" @click="handleError">提交异常</u-button>
		<u-toast ref="uToast" />
		<!-- <u-top-tips ref="uToast"></u-top-tips> -->
	</view>
</template>

<script>
import { machineAbnormalCommit, addAbnormalInfo, getAbnormalNotDeal } from '../../utils/index.js'
	export default {
		data() {
		  return {
			labelWidth: 140,					//标签名宽度
			form: {
				machineId: '',					//机台号
				abnormalType: '工艺'				//异常类型
			},
			// 异常选项
			list: [
				{
					name: '工艺'
				},
				{
					name: '质量'
				},
				{
					name: '检验'
				},
				{
					name: '缺料'
				}
			],
		  }
		},
		methods: {
			// e代表选择异常警告的种类，为字符串，例如工艺，质量，检验与缺料中的一种
			radioChange(e) {
				this.form.abnormalType = e
			},
			// 将选择的异常警告经过处理发送到后台
			async handleError() {
				const query = {}
				query.machineId = this.form.machineId
				query.abnormalType = this.form.abnormalType == '工艺' ? '0' : 
									 this.form.abnormalType == '质量' ? '1' :
									 this.form.abnormalType == '检验' ? '2' :
									 this.form.abnormalType == '缺料' ? '3' : '1'
				const { data } = await addAbnormalInfo(query)
				const errInfo = data.msg										//后台返回的错误信息
				console.log(errInfo)
				if(data.code == '1') {
					this.$refs.uToast.show({
						title: errInfo,
						type: 'success',
						icon: true
					})
				} else {
					this.$refs.uToast.show({
						title: errInfo,
						type: 'error',
						icon: true
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
</style>
